<template>
	<view class="sy">
		<image :src="animationUrl" mode="widthFix" class="fox"></image>
		<view class="content">
			{{content}}
		</view>
		<view class="button">
			<view class="audio" @touchstart="audioTouchStart" @touchend="audioTouchEnd">
				<image src="../../static/images/audios.gif" mode=""></image>
			</view>
			<!-- <image src="../../static/images/audio.png" @touchstart="audioTouchStart" @touchend="audioTouchEnd"
				mode="widthFix" class="audio"></image> -->
			<view class="wave w1" v-show="isTouch"></view>
			<view class="wave w2" v-show="isTouch"></view>
		</view>
		<view @click="toBook" class="desk" id="drag" @touchstart="dragStart" @touchend="dragEnd" @touchmove="dragMove">
			<image src="../../static/images/desk.png" class="desk-img" mode="widthFix"></image>
			<text class="book">课程目录</text>
		</view>
	</view>
</template>

<script>
	import {
		sort_ascii,
		getMD5Screct
	} from "../../static/js/utils"
	import {
		Recorder
	} from '../../static/js/recorder'
	var recorder = null
	let innerAudioContexts = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				isTouch: false,
				content: '主人，请打开你要学习的课文题目，如：打开 大青树下的小学。长按进行回答哦',
				token: "",
				recorderManager: {},
				innerAudioContext: {},
				voicePath: '',
				area: 'province',
				recorder: null,
				temp: null,
				animationlist: [],
				animationUrl: '',
			};
		},
		onLoad(option) {
			this.getAnimationlist();
			Recorder.get(rec => {
				recorder = rec
			})
		},
		mounted() {
			this.jieruApi();
		},
		methods: {
			// 获取动画列表
			getAnimationlist() {
				let data = {
					appKey: this.appkey,
					appSecret: this.appSecret,
					uid: this.uid.toString(),
				}
				let sign = sort_ascii(data);
				sign = getMD5Screct(sign);
				data.signature = sign;
				uni.request({
					method: "POST",
					url: `${this.baseUrl}/api/ai/animationlist`,
					data: data,
					success: (res) => {
						const {
							data
						} = res.data;
						this.animationlist = data;
						const idx = this.animationlist.findIndex(v => v.action.indexOf('3') !== -1)
						this.animationUrl = data[idx].image;
					},
					fail: (err) => {
						console.log('请求失败_______________', err)
					}
				})

			},
			audioTouchStart() {
				this.startRecording();
			},
			audioTouchEnd() {
				this.isTouch = false;
				this.stopRecording();
			},
			startRecording() {
				innerAudioContexts.stop()
				recorder.start()
				this.isTouch = true;
			},
			stopRecording() {
				recorder.stop();
				this.getRecording();
			},
			getRecording() {
				let file = recorder.getBlob(); //得到需要的pcm文件
				const files = new window.File(
					[file],
					'test', {
						type: file.type
					}
				);
				this.getText(files, file.type)
			},
			getText(speech, type) {
				let data = {
					format: type.split("/")[1],
					rate: 8000,
					// speech: speech,
					cuid: "baidu_workshop",
				}
				uni.uploadFile({
					url: `${this.baseUrl}/api/baidu/baiduvoicetotext`,
					file: speech,
					name: 'speech', //后台接收字段名
					formData: data,
					success: (res) => {
						const mydata = JSON.parse(res.data);
						uni.navigateTo({
							url: "/pages/index/answer?title=" + mydata.data.text[0]
						})
					},
					fail: (err) => {
						console.log('请求失败_______________', err)
					}
				})
			},
			jieruApi() {
				let data = {
					appKey: this.appkey,
					appSecret: this.appSecret,
					msg: this.content,
					deviceId: this.deviceId,
				}
				let sign = sort_ascii(data);
				sign = getMD5Screct(sign);
				data.signature = sign;
				uni.request({
					url: `${this.baseUrl}/api/ai/texttovoice`,
					method: "POST",
					data: data,
					success: (res) => {
						const url = res.data.data.url[0]
						innerAudioContexts.autoplay = true;
						innerAudioContexts.loop = false;
						innerAudioContexts.src = url;
						innerAudioContexts.play();
					},
				})

			},
			dragStart(e) {
				this.x = e.touches[0].clientX;
				this.y = e.touches[0].clientY;
				const el = document.getElementById("drag")
				//获取左部和顶部的偏移量
				this.l = el.offsetLeft;
				this.t = el.offsetTop;
				//开关打开
				this.isDown = true;
			},
			dragMove(e) {
				if (this.isDown == false) {
					return;
				}
				//获取x和y
				let nx = e.touches[0].clientX;
				let ny = e.touches[0].clientY;
				//计算移动后的左偏移量和顶部的偏移量
				let nl = nx - (this.x - this.l);
				let nt = ny - (this.y - this.t);
				const el = document.getElementById("drag")
				el.style.left = nl + "px";
				el.style.top = nt + "px";
			},
			dragEnd(e) {
				this.isDown = false;
			},
			toBook() {
				uni.navigateTo({
					url: "/pages/index/book"
				})
			}

		},
	};
</script>

<style lang="scss" scoped>
	.sy {
		height: 100vh;
		background: url("../../static/images/bg.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: relative;

		.fox {
			width: 50%;
			position: absolute;
			left: 25%;
			bottom: 22%;
			height: auto;
		}

		.content {
			color: #fff;
			left: 0;
			right: 0;
			text-align: center;
			bottom: 18%;
			padding: 0 70rpx;
			position: absolute;
		}

		.button {
			left: 0;
			right: 0;
			bottom: 14%;
			position: absolute;

			.audio {
				left: calc(50% - 67rpx);
				position: absolute;
		
			}
			.audio image{
				width: 134rpx;
				height: 134rpx;
			}
		}

		.wave {
			position: absolute;
			left: calc(50% - 75rpx);
			top: -25rpx;
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			background-attachment: fixed;
			background-position: center center;
		}

		.w1 {
			z-index: 2;
			border: 1px solid #fff;
			background-size: auto 106%;
			animation: wave 1s infinite;
		}

		.w2 {
			z-index: 3;
			border: 1px solid #fff;
			animation: wave 1s .5s infinite;
		}

		@keyframes wave {
			0% {
				width: 100rpx;
				height: 100rpx;
				left: calc(50% - 50rpx);
				top: 0;
			}

			100% {
				left: calc(50% - 75rpx);
				top: -25rpx;
				width: 150rpx;
				height: 150rpx;
				opacity: 0.4;
			}
		}
	}

	.desk {
		position: absolute;
		left: 20rpx;
		top: 10vh;
		width: 60px;

		//脱离文档流
		.desk-img {
			width: 60px;
		}

		.book {
			color: #FFFFFF;
		}
	}
</style>
